<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/adminHeader::html('任务列表')" ></head>
<body>
<div th:replace="include/adminNavigator::html"></div>
<div id="workingArea">
	<h1 class="label label-info">任务配置</h1>
    <br>
    <br>
    <div class="listDataTableDiv">
		<table class="table table-striped table-bordered table-hover  table-condensed">
			<thead>
			 <tr class="success">
			 	<th>质检任务</th>
			    <th>作者姓名</th>
			    <th>备注</th>			    
			    <th>表单配置</th>
			    <th>邮件配置</th>
			    <th>样本管理</th>
			    <th>删除任务</th>
			 </tr>
			</thead>
			  
			<tbody>
				 <tr v-for="bean in beans ">
				   <td>{{bean.name}}</td>
				   <td>{{bean.author}}</td>	
				   <td>{{bean.remarks}}</td>			   
				   <td>
					  <a :href="'table_list?task_id=' + bean.id">
						  <span class="glyphicon glyphicon-list">
						  </span>
					  </a>
				   </td>
				   <td>
					  <a :href="'admin_email_Conf?id=' + bean.id ">
						  <span class="glyphicon glyphicon-envelope">						  	
						  </span>
					  </a>
				   </td>
				   
				   <td>
					  <a :href="'sample_list?id=' + bean.id ">
						  <span class="glyphicon glyphicon-list-alt">						  	
						  </span>
					  </a>
				   </td>
				   		   
			       <td href="#nowhere"  @click="deleteBean(bean.id)">
			       	   <span class="glyphicon glyphicon-trash"></span>
			       </td>			       
			     </tr>
			</tbody>
		</table>
	</div>
	<div th:replace="include/adminPage::html" ></div>
	
	<div class="panel panel-warning addDiv">
        <div class="panel-heading">新增任务</div>
        <div class="panel-body">
            <table class="addTable">
                <tr>
                    <td>任务名称</td>
                    <td><input  @keyup.enter="add" v-model.trim="bean.name" type="text" class="form-control"></td>
                </tr>
                <tr>
                    <td>作者姓名</td>
                    <td><input  @keyup.enter="add" v-model.trim="bean.author" type="text" class="form-control"></td>
                </tr>
                <tr>
                    <td>备注</td>
                    <td><input  @keyup.enter="add" v-model.trim="bean.remarks" type="text" class="form-control"></td>
                </tr>                
                <tr class="submitTR">
                    <td colspan="2" align="center">
                        <a href="#nowhere"  @click="add" class="btn btn-success">提交</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
	
	
</div>
<div th:replace="include/adminFooter::html" ></div>
</body>

<script>
	var data4Vue = {
	    uri:'tasks',
	    beans: [],
	    bean: { id: 0, name: '', author:'',remarks:''},
	    pagination:{}
	};
	
	//ViewModel
	var vue = new Vue({
	    el: '#workingArea',
	    data: data4Vue,
	    //mounted　表示这个 Vue 对象加载成功了
	    mounted:function(){ 
	        this.list(0);
	    },
	    methods: {
	        list:function(start){
                var url =  this.uri+ "?start="+start;
                axios.get(url).then(function(response) {
                    vue.pagination = response.data;
                    vue.beans = response.data.content;
                });
            },
	        add: function () {
	            if(!checkEmpty(this.bean.name, "任务名称"))
	                return;
	            if(!checkEmpty(this.bean.author, "作者姓名"))
	                return;
	            var url = this.uri;
	
	            //axios.js 上传文件要用 formData 这种方式
	            var formData = new FormData();
	            formData.append("name",  this.bean.name);
	            formData.append("author", this.bean.author);
	            formData.append("remarks", this.bean.remarks);
	            axios.post(url,formData).then(function(response){
	                vue.list(0);
	                vue.bean = { id: 0, name: '', author:'',remarks:''};
	            });
	        },
	        deleteBean: function (id) {
	            if(!checkDeleteLink())
	                return;
	            var url = this.uri+"/"+id;
	            axios.delete(url).then(function(response){
	                if(0!=response.data.length){
	                    alert(response.data);
	                }
	                else{
	                    vue.list(0);
	                }
	            });
	        },
	        getFile: function (event) {
	            this.file = event.target.files[0];
	        },
	        // 翻页 定义在adminHeader.html中
	        jump: function(page){	        	
	            jump(page,vue); 
	        },
	        jumpByNumber: function(start){
	            jumpByNumber(start,vue);
	        }
	    }
	});
</script>

</html>
